<template>
  <div class="administer">
    <div class="administerNav">
      <backHeader></backHeader>
    </div>
    <div class="administerCont">
      <div class="html_pst">
        
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="灯具类型:" class="wid150">
                <el-select v-model="form.lampType" style="width:135px">
                <el-option
                    v-for="item in lampTypeList"
                    :key="item.id"
                    :label="item.lampName"
                    :value="item.id"
                ></el-option>
                </el-select>
            </el-form-item>
         
            <el-form-item label="光色类型" class="dwliz">
                <el-dropdown trigger="click" @command="EditFormPdfGrayDemandText">
                    <span class="el-dropdown-link">
                        <span v-html="form.colorTypeText"></span><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in guangseleixingList" :key="item.id" :command="item" icon="el-icon-plus" v-html="item.dictCont"></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item label="功率：">
                <el-input v-model="form.lampPowerMin" style="width:100px"></el-input>~
                <el-input v-model="form.lampPowerMax"  style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="功率阶梯跨度:">
                <el-input v-model="form.lampPowerFrad"  style="width:100px"></el-input>W
            </el-form-item>
            <el-form-item class="atuo">
                <el-button type="primary" @click="initData()">生成</el-button>
            </el-form-item>
        </el-form>

        <div id="echarts" style="height:100%;"></div>
      
      </div>
    </div>
  </div>
</template>
<script>
import backHeader from "@/views/common/backHeader.vue";

export default {
  name: "hello",
  data() {
    return {
      lampTypeList:[],
      guangseleixingList:[],
      form:{
            colorTypeText:'',
            lampPowerFrad:'5',
            lampPowerMin:'',
            lampPowerMax:'',
            colorType:'',
            lampType:''
      }
    };
  },
  mounted(){
      let self = this
                //光色类型
      this.$http.get("/api/dictTypeAllList",{indexPinyin:'dengjusecaifenlei'},function(res){
        self.guangseleixingList = res.data
      })
                 //加载灯具类型
      this.$http.get("/api/lampTypes/detectionJson", {}, function(res) {
        if (res.success) {
          self.lampTypeList = res.data;
          if(self.lampTypeList != null){
            self.form.lampType = self.lampTypeList[0].id
      self.initData()
          }
        }
      });
  },
  components: {
    backHeader
  },
  methods: {
        EditFormPdfGrayDemandText(item){
            this.form.colorType = item.id
            this.form.colorTypeText = item.dictCont
        },
     initData() {
      var echarts = document.getElementById("echarts");
      var myChart = this.$echarts.init(echarts);
      let self = this;
      // let data = {
      //   colorType:'',
      //   drawingCount:'',
      //   lampPower:'',
      //   lampPowerFrad:25,
      //   lampPowerMax:'',
      //   lampPowerMin:'',
      //   lampType:self.form.lampType,
      //   monomersCount:'',
      //   useCount:''
      // }
      this.$http.postObj(
        "/api/contestStatistics/contestTypeUseBarJson",
        self.form,
        function(res) {
          // var res = '{"success":true,"code":"0000","message":"成功","data":[{"lampPowerMin":null,"drawingCount":654,"lampPowerMax":null,"lampPowerFrad":25,"useCount":449,"monomersCount":402,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":576,"lampPowerMax":null,"lampPowerFrad":50,"useCount":362,"monomersCount":334,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":3239,"lampPowerMax":null,"lampPowerFrad":75,"useCount":123,"monomersCount":93,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":752,"lampPowerMax":null,"lampPowerFrad":100,"useCount":102,"monomersCount":111,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":125,"useCount":59,"monomersCount":44,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":30,"lampPowerMax":null,"lampPowerFrad":150,"useCount":12,"monomersCount":15,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":175,"useCount":0,"monomersCount":0,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":200,"useCount":18,"monomersCount":24,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":225,"useCount":0,"monomersCount":0,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":250,"useCount":0,"monomersCount":0,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":275,"useCount":0,"monomersCount":0,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null},{"lampPowerMin":null,"drawingCount":0,"lampPowerMax":null,"lampPowerFrad":300,"useCount":1,"monomersCount":0,"lampType":null,"lampTypeIn":null,"colorType":null,"lampPower":null}]}'
// var data = JSON.parse(res).data
var data = res.data
                var drawingCount  =[];
				var useCount  =[];
				var lampPower =[];
				var monomersCount =[];
				for(var i=0 ;i<data.length;i++){
					drawingCount.push(data[i].drawingCount);
					useCount.push(data[i].useCount);
					lampPower.push(data[i].lampPowerFrad);
					monomersCount.push(data[i].monomersCount);
				}
				
				var option = {
					        tooltip : {
					            trigger: 'axis',
					            axisPointer: {
					                type: 'shadow',
					                label: {
					                    show: true
					                }
					            }
					        },
					        toolbox: {
					            show : true,
					            feature : {
					               mark : {show: true},
					                //dataView : {show: true, readOnly: false},
					                magicType: {show: true, type: ['line', 'bar']},
					                restore : {show: true},
					                saveAsImage : {show: true}
					            }
					        },
					        calculable : true,
					        legend: {
					            data:['Growth', '灯参用量', '灯具用量','单体用量'],
					            itemGap: 5,
					            selected: {
								    '灯具用量' : false,
								    '单体用量' : false,
								    //不想显示的都设置成false
								  }
					        },
					        grid: {
					            top: '12%',
					            left: '1%',
					            right: '10%',
					            containLabel: true
					        },
					        xAxis: [
					            {
					                type : 'category',
					                data : lampPower,
					                name : '功率',
					            }
					        ],
					        yAxis: [
					            {
					                type : 'value',
					                name : '数量',
					             /*    axisLabel: {
					                    formatter: function (a) {
					                        a = +a;
					                        return isFinite(a)
					                            ? echarts.format.addCommas(+a / 1000)
					                            : '';
					                    }
					                } */
					            }
					        ],
					        dataZoom: [
					            {
					                show: true,
					                start: 0,
					                end: 50
					            },
					            {
					                type: 'inside',
					                start: 0,
					                end: 100
					            },
					            {
					                show: true,
					                yAxisIndex: 0,
					                filterMode: 'empty',
					                width: 30,
					                height: '80%',
					                showDataShadow: false,
					                left: '93%'
					            }
					        ],
					        series : [
					            {
					                name: '灯参用量',
					                type: 'bar',
					                data: useCount
                      }
                      // ,
					            // {
					            //     name: '灯具用量',
					            //     type: 'bar',
					            //     data: drawingCount
					            // },
					            // {
					            //     name: '单体用量',
					            //     type: 'bar',
					            //     data: monomersCount
					            // },
					            
					        ]
					    };
            myChart.clear();
            myChart.setOption(option);
        }
      );
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.dee {
  height: 70vh;
  .el-dialog__body{

    height:93%;
    
  }
}
.power.atuo{
  margin-right: 15px !important;
}
.wid150 {
  width: 235px  !important;
  .el-form-item__content{
  width: 150px  !important;
  }
  .el-select{
    width: 150px !important;
  }
}
.witds{
  .el-input{
    .el-input__inner{
      width: 185px;
      padding: 0 30px 0 15px;
    }
  }
}
.amend{
  cursor: pointer;
}
.roleControlTable{
 height: calc(100% - 186px) !important;
 height: -webkit-calc(100% - 186px) !important;
}
.shijian{width: 320px !important;}
.wed{
  width: 110px !important;
}
.wed1{
   width: 210px !important;
}
.backuy{
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 31px;
  border-radius: 50%;
  border:1px solid #000;
  display: inline-block;
  position: relative;
  top: 7px;
  margin-right: 10px;
  cursor: pointer;
  .el-icon-back{
    font-size: 20px;
  }
}
.addcustom{
  .el-dialog__body{
    padding-top: 3px;
  }
  .el-pagination{
    text-align: center;
  }
  .dialog-footer{
    text-align: center;
    width: 100%;
    display: block;
    .el-button--primary{
      background-color: #5b65a1;
      color:#fff;
      border:none;
    }
  }
} 
.dewd{
  width: auto !important;
}
.add{
  margin-bottom: 5px;
  text-align: right;
  button:last-child{
    margin-right: 0;
  }
  span{
    cursor: pointer;
  }
  .el-button--primary{
    background-color: #5b65a1;
    color:#fff;
    border:none;
        margin-right: 10px;
  }
}
.lampData .lampData_top .el-form-item{
  width: 280px;
  margin-right: 4px;
  .el-select{
    width: 185px;
  }
  &.atuo{
    width: auto;
    margin-left: 5px;
  }
  &.shijian{
    .el-date-editor.el-input{
      width: 115px;
      &.el-input--suffix .el-input__inner{
        padding-right: 5px;
      }
    }
  }
}
.fdfefcs{
  .el-form-item__label{
    width: 97px !important;
  }
}
.lampData {
  .el-form-item {
    margin-right: 20px;
    .el-button--primary {
      background-color: #5b65a1;
      border-radius: 4px;
      border: none;
    }
  }
  .witd {
    .el-form-item__label {
      // width: 82px;
    }
  }
}
    .top{
        margin-bottom: 20px;
        
    }
    .button{
            background-color: #5b65a1;
            border-radius: 4px;
            color: #fff;
            padding: 12px 20px;
            font-size: 14px;
            border: none;
            margin-right: 20px;
            cursor: pointer;
        }

.dwliz{
  .el-form-item__content{
    width: 150px;
    .el-dropdown{
      width: 100%;
      .el-dropdown-link{
        display: block;
        border: 1px solid #DCDFE6;
        height: 40px;
        line-height: 40px;
        padding: 0 30px 0 15px;
        position: relative;
        color: #606266;
        .el-icon--right{
            position: absolute;
            right: 0;
            color: #C0C4CC;
                right: 8px;
            margin-left: 0px;
            top: 50%;
            margin-top: -7px;
        }
      }
    }
  }
}        
    </style>


